<template>
  <div>
    <basic-container>
      <avue-form v-model="formData" :option="editOption" @submit="submit">
        <template slot="longitude" slot-scope="scope">
          <div>
            <p>{{ position.formattedAddress }}</p>
            <avue-map v-model="position" :lnglat="lnglat" style="width:200px"></avue-map>
          </div>
        </template>
        <!-- 角色 -->
        <template slot="roleIds" slot-scope="scope">
          <avue-select
            v-model="formData.roleIds"
            :dic="rolesOptions"
            :props="roleProps"
            multiple
            placeholder="请选择角色"
          />
        </template>
        <!-- 商家 -->
        <template slot="merchantId" slot-scope="scope">
          <el-select
            v-model="formData.merchantId"
            filterable
            remote
            placeholder="请输入关键词"
            :remote-method="getMerchant"
            :loading="loading"
          >
            <el-option
              v-for="item in merchantOptions"
              :key="item.merchantId"
              :label="item.merchantName"
              :value="item.merchantId"
            ></el-option>
          </el-select>
        </template>
        <!-- 详细地址 -->
        <template slot="address" slot-scope="scope">
          <el-input v-model="formData.address"></el-input>
        </template>
        <!-- 选择坐标 -->
        <template slot="position" slot-scope="scope">
          <div>
            <p>{{ formData.address }}</p>
            <avue-map @input="changePosition" :lnglat="formData.lnglat" style="width:200px"></avue-map>
          </div>
        </template>
        <!-- 地址区域 -->
        <template slot="area" slot-scope="scope">
          <el-input v-model="formData.area"></el-input>
        </template>

        <!-- 部门 -->
        <template slot-scope="scope" slot="deptId">
          <avue-input-tree
            @input="changeDeptFunc"
            v-model="formData.deptName"
            :dic="treeDeptData"
            :props="defaultProps"
            type="tree"
            placeholder="请选择所属部门"
          />
        </template>
        <template slot-scope="scope" slot="menuForm">
          <!-- <el-button>新增</el-button> -->
          <el-button @click="cancel">取消</el-button>
        </template>
      </avue-form>
    </basic-container>
  </div>
</template>

<script>
import { editOption } from "../../const/crud/supply/supplierEdit";
import {
  putObj,
  getMerchantObj,
  editSupplyDetails
} from "../../api/supply/supplier";
import { fetchTree } from "@/api/admin/dept";
import { deptRoleList } from "@/api/admin/role";
export default {
  data() {
    return {
      loading: false,
      // 修改配置
      editOption: editOption,
      // form: {},
      rolesOptions: [],
      // 表单数据
      // formData: {},
      positionInfo: {},
      oldDeptId: "",
      formData: {
        area: "",
        latitude: "",
        longitude: "",
        // 初始化坐标
        lnglat: {
          P: 29.563761,
          R: 106.55046400000003
        }
      },
      roleProps: {
        label: "roleName",
        value: "roleId"
      },
      merchantOptions: [],
      treeDeptData: [],
      defaultProps: {
        label: "name",
        value: "id",
        children: "children"
      }
    };
  },
  created() {
    this.getNodeData();
  },
  mounted() {
    // let id = this.$route.query.id;
    // 获取部门信息
    this.getDtp();
    this.getMerchant();
    // this.getDetails(id);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.getDetails(vm.$route.query.res.id));
  },
  methods: {
    // 获取当前id的供应商详情
    async getDetails(id) {
      let params = {
        supplierId: id
      };
      const { data: res } = await editSupplyDetails(params);
      this.formData = res.data;
      let position = this.formData.position || "";
      let positionArr = position.split(",");
      this.formData.roleIds = this.formData.roleList;
      this.formData.lnglat = {
        P: positionArr[1],
        R: positionArr[0]
      };
      this.oldDeptId = this.formData.deptId;
      console.log("getDetails", res.data, this.formData);
    },
    // 标注位置
    changePosition(data) {
      console.log("changePosition data", data);

      this.formData.address = data.formattedAddress;
      console.log("addressComponent", data.addressComponent);
      this.formData.area = data.addressComponent.province;

      this.formData.latitude = data.latitude;
      this.formData.longitude = data.longitude;
      console.log("formData", this.formData, data);
      this.formData.lnglat = {
        P: data.latitude,
        R: data.longitude
      };
    },
    changeDeptFunc(deptId) {
      this.formData.deptId = deptId;
    },
    // 角色权限
    getNodeData() {
      deptRoleList().then(response => {
        this.rolesOptions = response.data.data.filter(
          item => item.roleCode.toUpperCase() !== "ROLE_ADMIN"
        );
      });
    },
    // 提交按钮
    submit(from, done) {
      console.log(from);
      let deptId = from.deptId;
      let roleIds = from.roleIds;
      from.roleIds = roleIds.join(",");
      if (typeof deptId !== "number" && isNaN(deptId)) {
        from.deptId = this.oldDeptId;
      }
      putObj(from).then(res => {
        if (res.status !== 200) {
          return this.$message.success("编辑失败");
        }
        this.$message.success("编辑成功");
        this.$store.commit("DEL_ONE_TAG", this.$route);
        this.$router.push("supplier");
        done();
      });
    },
    cancel() {
      this.$store.commit("DEL_ONE_TAG", this.$route);
      this.$router.push("supplier");
    },
    getDtp() {
      fetchTree().then(response => {
        this.treeDeptData = response.data.data;
      });
    },
    // 获取商家信息
    getMerchant(query) {
      // 传值
      let params = {
        current: "",
        size: "",
        status: 2,
        merchantName: query
      };
      getMerchantObj(params).then(res => {
        if (res.status !== 200) {
          return this.$message.success("获取失败");
        }
        this.merchantOptions = res.data.data.records || {};
      });
    }
  }
};
</script>

<style>
</style>
